<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 100px;
            height: 30px;
            background-color: #666;
            border: 0;
        }

        .active {
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>

<body>

    <button class="btn active">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>

    <script>

        // classList 获取类名列表  --- 伪数组
        //    add()    添加
        //    remove()  删除
        //    contains() 判断是否存在某个类名
        //    replace()  替换类名









        var oBtns = document.querySelectorAll('button');
        // for (var i = 0; i < oBtns.length; i++) {
        //     oBtns[i].onclick = function () {
        //         // 把所有的类名去掉
        //         for (var i = 0; i < oBtns.length; i++) {
        //             // 想去掉active
        //             oBtns[i].className = 'btn';
        //         }

        //         this.className += ' active';
        //     }
        // }

        console.log(oBtns[0].className);  //  'btn active'

        console.log(oBtns[0].classList);  // ['btn' , 'active']


        // console.log([])

        // add  添加类名
        // oBtns[0].classList.add('qq');
        // // remove  删除类名
        // oBtns[0].classList.remove('active');
        // // contains 判断类名是否存在 -- 返回布尔值
        // console.log(oBtns[0].classList.contains('btn'));
        // // replace 替换类名
        // oBtns[0].classList.replace('qq', 'ww');


        for (var i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = function () {
                // 把所有的类名去掉
                for (var i = 0; i < oBtns.length; i++) {
                    // 想去掉active
                    oBtns[i].classList.remove('active');
                }

                this.classList.add('active');
            }
        }

    </script>

</body>

</html>